<!-- page content -->
<div id="myVue" class="right_col" role="main">
    <div class="">
        <div class="page-title">            <div class="title_left">
                <h3>
                    Vue Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>
        <h3>获取数据</h3>
        <p>name:{{user.name}}</p>
        <p>===================</p>
        <p>单向绑定</p>
        <input type="text":value="user.name">
        <p>===================</p>
        <h3>双向绑定</h3>
        <input type="text" v-model:value="user.name"/>
        <input type="text" v-model="user.gender"/>
        <p>===================</p>
        <h3>循环绑定</h3>
        <select>
            <option v-for="(city,index) in cities" :value="city.cityId">{{city.cityName}}</option>
        </select>
        <table>
            <thead>
             <th>
                <td>id</td>
                 <td>name</td>
             </th>
            </thead>
            <tbody>
                     <tr v-for="(city,index) in cities">
                         <td>{{city.cityId}}}</td>
                         <td>{{city.cityName}}</td>
                      </tr>
            </tbody>
        </table>
        <p>--------=================---------</p>
        <h3>绑定事件</h3>
        <button @clilck="test_1()">test_1</button>
        <button id="test_2" price ="222222" @clilck="test_2($event)">test_2</button>
        <p>--------=================---------</p>
        <h3>自定义模板</h3>
        <button-demo></button-demo>
        <button-count></button-count>
    </div>
</div>
<!-- /page content -->

<script>
    $(function () {
        test_1();
    });
    Vue.component("button-demo",{
        template:"<button>button-demo</button>"
    });
    //组件方式一
    Vue.component("button-count",{
        data:function(){
          return {
              count:0,
          };
        },
        methods: {
            count_fun:function () {
                this.count +=1;
            },
        },
        template:"<button @click ='count_fun()'>{{count}}</button>",
    });

    // .vue组件
    var myVue = new Vue({
        el: "#myVue",
        data: {
            user: {
                name: "hujiang",
                age: 18,
                gender:"male"
            },
            cities: [
                {
                cityId:"1",
                cityName:"chengdu"
            },
                {
                cityId:"2",
                cityName:"wuhan"
            },
            ],
        },
        methods: {
            test_1: function () {
                cosole.log(this.user);
            },
            test_2:function(event){
                cosole.log(event);
                cosole.log(event.originalTarget);
                cosole.log(event.originalTarget.attributes.getNamedItem("price").name);
                cosole.log(event.originalTarget.attributes.getNamedItem("price").value);
            },
            initCities: function () {
                var countryId = 522;
                var self = this;
                $.ajax({
                    url: "/api/cities/" + countryId,
                    type: "get",
                    // contentType: "application/json",
                    // data: JSON.stringify(self.searchBean),
                    success: function (rs) {
                        self.cities = rs;
                    },
                    error: function (data) {
                        layer.alert(data.responseText, { icon: 0 });
                    },
                });
            },
        },
        // 第二个钩子让外层调用
        created:function(){
          window.test_1 = this.test_1();
        },
        // 挂钩 mounted生命周期    -----初始化页面函数的时候在此挂钩
        mounted:function () {
            // this.initCities();
        }
    });
</script>
